﻿var index=0;//初始位置为0
(function ($) {
    $('#list_con ul li').hover(function () {
        index = $(this).index();//鼠标hover li标签时，获取当前的index
    });
        $.fn.hoverDelay = function (options) {
            var defaults = {
                // 鼠标经过的延时时间
                hoverDuring: 200,
                // 鼠标移出的延时时间
                outDuring: 500,
                // 鼠标经过执行的方法
                hoverEvent: function () {
                    // 设置为空函数，绑定的时候由使用者定义
                    $.noop();
                },
                // 鼠标移出执行的方法
                outEvent: function () {
                    $.noop();
                }
            };
            var sets = $.extend(defaults, options || {});
            var hoverTimer, outTimer;
            return $(this).each(function () {
                $(this).hover(function () {
                    // 清除定时器
                    clearTimeout(outTimer);
                    hoverTimer = setTimeout(sets.hoverEvent,sets.hoverDuring);
                }, function () {
                    clearTimeout(hoverTimer);
                    outTimer = setTimeout(sets.outEvent,sets.outDuring);
                });
            });
        }
    })(jQuery);

// 具体使用，给id为“#test”（本例为下行的li标签）的元素添加hoverEvent事件
$("#list_con ul li").hoverDelay({
    // 自定义，outEvent同
    hoverEvent: function () {
        var left = 390 +77 * index;//给要随之移动的对象计算位置
        $('#list_line').animate({ "left": left }, 300);
    },
    outEvent: function () {
        $('#list_line').animate({ "left": 390 }, 300);
    }
});